<template>
    <div>
        <!--          面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >🏠</el-breadcrumb-item>
            <el-breadcrumb-item>基本信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片区域-->
        <el-card class="box-card">
<!--            搜索栏-->
            <el-row :gutter="20">
                <el-col :span="2"> <div class="chaxun">账号:</div></el-col>
                <el-col :span="4">
                    <el-input
                        placeholder="请输入账号"
                        prefix-icon="el-icon-search"
                        v-model="zhanghao">
                     </el-input>
                </el-col>
                <el-col :span="1" >
                    <el-button type="success" icon="el-icon-search" @click="chazhanghao" plain></el-button>
                </el-col>
                <el-col :span="2" :push="1"> <div class="chaxun">手机号:</div></el-col>
                <el-col :span="4" :push="1">
                     <el-input
                        placeholder="请输入手机号"
                        prefix-icon="el-icon-search"
                        v-model="shouji">
                </el-input>
                </el-col>
                <el-col :span="1" :push="1">
                    <el-button type="success" icon="el-icon-search" @click="chashouji" plain></el-button>
                </el-col>
                <el-col :span="2" :push="2"> <div class="chaxun">邮箱:</div></el-col>
                <el-col :span="4" :push="2">

                     <el-input
                        placeholder="请输入邮箱"
                        prefix-icon="el-icon-search"
                        v-model="youxiang">
                </el-input>
            </el-col>
                <el-col :span="1" :push="2">
                    <el-button type="success" icon="el-icon-search" @click="chayouxiang" plain></el-button>
                </el-col>
            </el-row>
<!--            选择栏-->
            <el-row :gutter="20">
                <el-col :span="2">
                    <div class="chaxun">角色:</div>
                </el-col>
                <el-col :span="2">
                    <el-radio v-model="role" label="1">普通用户</el-radio>
                </el-col>
                <el-col :span="2">
                    <el-radio v-model="role" label="2">医生</el-radio>
                </el-col>
                <el-col :span="2">
                    <el-radio v-model="role" label="3">糖尿病患者</el-radio>
                </el-col>
                <el-col :span="2">
                    <div class="chaxun">性别:</div>
                </el-col>
                <el-col :span="2">
                    <el-radio v-model="sex" label="1">男</el-radio>
                </el-col>
                <el-col :span="2">
                    <el-radio v-model="sex" label="2">女</el-radio>
                </el-col>
                <el-col :span="4" :push="4">
                    <el-button type="danger" size="medium"  @click="clear" plain>清空</el-button>
                </el-col>
            </el-row>
<!--            用户数据表格-->
            <el-table
                    :data="userlist"
                    stripe
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
            >
                <el-table-column
                       type="index">
                </el-table-column>
                <el-table-column
                        prop="avatar"
                        label="头像"
                        width="80">
                    <template slot-scope="scope">
                        <el-avatar :src="scope.row.avatar" />
                    </template>
                </el-table-column>
                <el-table-column
                        prop="account"
                        label="用户账号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="telephoneNumber"
                        label="手机号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="role"
                        label="用户角色"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="introduction"
                        label="个人介绍"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别"
                        width="70">
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="avatar"-->
<!--                        label="用户凭证"-->
<!--                        width="160"-->
<!--                >-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="birth"
                        label="出生年月"
                        width="100"
                >
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                        >修改</el-button>
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="shangchu(scope.row.id)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--     分页     -->
            <el-pagination
                    v-show="total>0"
                    :page-size="queryParams.pageSize"
                    :pager-count="11"
                    :current-page.sync="queryParams.pageNum"
                    :total="total"
                    @current-change="getuserlist"
            >
            </el-pagination>
            <!-- 添加或修改用户信息对话框 -->
            <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="头像" prop="avatar">
<!--                        <el-tag type="info" effect="plain">{{form.avatar}}</el-tag>-->
                            <el-avatar :src="form.avatar" />
                            <el-row >
                                <el-upload
                                        class="upload-demo"
                                        action="http://localhost:8888/upload/avatar"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </el-row>
                    </el-form-item>
                    <el-form-item label="账号" prop="account">
                        <el-tag type="info" effect="plain">{{form.account}}</el-tag>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" placeholder="请输入新密码" />
                    </el-form-item>
                    <el-form-item label="用户角色" prop="role">
                        <el-tag type="info" effect="plain">{{form.role}}</el-tag>
                    </el-form-item>
                    <el-form-item label="手机号" prop="telephoneNumber">
                        <el-input v-model="form.telephoneNumber" placeholder="请输入手机号" />
<!--                        <el-tag type="info" effect="plain">{{form.telephoneNumber}}</el-tag>-->
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱号" />
<!--                        <el-tag type="info" effect="plain">{{form.email}}</el-tag>-->
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                            <el-radio label="未知"></el-radio>
                        </el-radio-group>
<!--                        <el-tag type="info" effect="plain">{{form.sex}}</el-tag>-->
                    </el-form-item>
                    <el-form-item label="个人介绍" prop="introduction">
                        <el-input v-model="form.introduction" placeholder="请输入个人介绍" />
<!--                        <el-tag type="info" effect="plain">{{form.introduction}}</el-tag>-->
                    </el-form-item>
                    <el-form-item label="出生年月" prop="birth">
                        <div class="block">
                            <el-date-picker
                                    v-model="form.birth"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </el-dialog>

        </el-card>
    </div>

</template>

<script>
    export default {
        name: "jibenxinxi",
        data() {
            return {

                // 用户数据列表
                userlist: [],
                // 用户查询数据列表
                filusers: [],
                // 三个输入框的数据绑定
                zhanghao: '',
                shouji: '',
                youxiang: '',
                // 单选框的数据绑定
                sex: '',
                role: '',
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
                total: 0,
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                },
                // 弹出对话框标题
                title: "",
                // 修改对话框开关控制
                open :false,
            }
        },
        created() {
            this.getuserlist(),
                this.tableRowClassName(this.userlist)

        },
        watch: {
            role: {
                handler() {

                }
            },
            sex: {
                handler(val) {
                   this.sexridiofunc(val)

                }
            }
        },
        methods: {
            /** 更换头像 */
            handleAvatarSuccess(res, file) {
                this.form.avatar = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                this.form = row;
                this.open = open;
            },
            async getuserlist() {
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                const {data: res} = await this.$http.get("user?pageNum="+this.queryParams.pageNum+'&'+"pageSize="+this.queryParams.pageSize)
                console.log(res.data.data)
                this.userlist = res.data.data
                this.total = res.data.total
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //点击按照输入框内容查询
            chazhanghao() {
                this.filusers = []
                this.filusers = this.userlist.filter((p) => {
                    return p.account.indexOf(this.zhanghao) !== -1
                })
            },
            chashouji() {
                this.filusers = []
                this.filusers = this.userlist.filter((p) => {
                    return p.telephoneNumber.indexOf(this.shouji) !== -1
                })
            },
            chayouxiang() {
                this.filusers = []
                this.filusers = this.userlist.filter((p) => {
                    return p.email.indexOf(this.youxiang) !== -1
                })
            },
            // 单选框区域
            sexridiofunc(val){
                if(val=='1'){
                    this.filusers = this.userlist.filter((p) => {
                        return p.sex == '男'
                    })
                }
                if(val=='2'){
                    this.filusers = this.userlist.filter((p) => {
                        return p.sex == '女'
                    })
                }
            },
            clear(){

                this.zhanghao='',
                    this.shouji='',
                    this.youxiang= '',
                    // 单选框的数据绑定
                    this.sex= '',
                    this.role='',
                    this.filusers=this.userlist
            },
            //删除操作
            async   shangchu(id){

                this.$confirm('是否确认删除?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    const token = sessionStorage.getItem("token");
                    this.$http.defaults.headers.common['Authorization'] = token;
                    this.$http.delete(`user/${id}`)
                    this.getuserlist()
                    this.$message("删除成功");
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            // this.form.time = this.form.date1 + " "+this.form.date2;
                            console.log(this.form);
                            console.log(this.form.time);
                            const token = sessionStorage.getItem("token");
                            this.$http.defaults.headers.common['Authorization'] = token;
                            console.log(this.form)
                            this.$http.put('user', this.form).then(response => {
                                if (response.data.code === 200) {
                                    this.$message({showClose: true, message: "修改成功", type: "success"})
                                    this.open = false;
                                    this.getuserlist()
                                }
                            });
                        }
                    }
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    avatar: null,
                    telephoneNumber: null,
                    email: null,
                    sex: null,
                    introduction: null,
                    role: null,
                    birth: null,
                };
                // this.resetForm("form");
            },
            // clearrideo(){
            //     this.putongyonhu=''
            //     this.yisheng=''
            //     this.huanzhe=''
            //     this.nan=''
            //     this.nv=''
            // }
            // async getUserlist(){
            //     // 需要授权的Api，必须在青丘头中使用Authorization 字段提供token令牌
            //     const AUTH_TOKEN=localStorage.getItem("token");
            //     this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN;
            //     const res=await this.$http.get(`users?query=${this.query}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`)
            //     console.log(res)
            // }
        }
    }
</script>

<style scoped>
    .el-breadcrumb{
        margin-bottom: 12px;

    }
    .el-card{
        box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    }
    .chaxun{

        height: 40px;
        text-indent: 1em;
        line-height: 2.5em;
        vertical-align: middle;
    }
    .el-radio{
        padding-top: 15px;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

</style>
